<template>
    <el-container style="height:100%">
        <el-aside width="300px">
            <div class="scroll-div">
                <el-tree :data="CategoryList" show-checkbox node-key="id" :default-expanded-keys="['1']"
                    :default-checked-keys="checkedKeyArr" :props="defaultProps" @check="onCheckNode"
                    @node-click="onClickNode" />
            </div>
        </el-aside>
        <el-main v-if="disType == 'full'" style="height:100%">
            <div>
                <el-space wrap>
                    <div v-for="i in toolList_data" :key=i.id>
                        <el-tooltip class="item" effect="light" :content=i.name placement="top-start" :show-after=300>
                            <span>
                                <el-card :body-style="{ padding: '0px' }">
                                    <img v-bind:src=i.iconURL class="image" />
                                </el-card>
                                <span>{{ i.name }}</span>
                            </span>
                        </el-tooltip>
                    </div>
                </el-space>
            </div>
        </el-main>
    </el-container>
</template>
  
<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex';
const store = useStore();
const parentModule = ref(null)
const disType = ref("full")

var testToolList = [{ id: 0x030a0000, name: '多段线', iconURL: "/res/icon/polyline.png", category: "base" },
{ id: 0X030B0000, name: '矩形', iconURL: '/res/icon/rect.png', category: "base" },
{ id: 0X030C0000, name: '圆形', iconURL: '/res/icon/circle.png', category: "base" },
{ id: 0X030D0000, name: '多边形', iconURL: '/res/icon/polygon.png', category: "base" },
{ id: 0X03200000, name: '圆弧', iconURL: '/res/icon/arc.png', category: "base" }
];
const toolList_data = ref(testToolList)
const checkedKeyArr = ref([])
const preCheckedNodeArr = ref([])

const defaultProps = {
    children: 'children',
    label: 'title',
}
const data = [
    {
        id: '1',
        title: '常规',
        className: 'base',
        isleaf: false,
        children: [
            {
                id: '1-1',
                title: '基本形状',
                className: 'base-unit',
                isleaf: true
            },
            {
                id: '1-2',
                title: '图案形状',
                className: 'base-symbol',
                isleaf: true
            },
            {
                id: '1-3',
                title: '方块',
                className: 'base-block',
                isleaf: true
            }
        ]
    },
    {
        id: '2',
        title: '日常办公',
        className: 'office',
        isleaf: false,
        children: [
            {
                id: '2-1',
                title: '组织结构图',
                className: 'office-org',
                isleaf: true
            },
            {
                id: '2-2',
                title: '图表和图形',
                className: 'office-chart',
                isleaf: false,
                children: [
                    {
                        id: '2-2-1',
                        title: '绘制报表',
                        className: 'office-chart-report',
                        isleaf: true
                    },
                    {
                        id: '2-2-2',
                        title: '营销图表',
                        className: 'office-chart-business',
                        isleaf: true
                    }
                ]
            },
            {
                id: '2-3',
                title: '业务进程',
                className: 'office-pro',
                isleaf: false
            }
        ]
    }
]

const CategoryList = ref(data)

//checkedNodes,checkedKeys,halfCheckedNodes,halfCheckedKeys
var onCheckNode = function (checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
    console.log(checkedKeys);
    let selNodeArr = checkedKeys.checkedNodes;
    window.ToolCollapsePanel.value.notifySelNode(selNodeArr);
    checkedKeyArr.value = [];
    for (let i = 0; i < selNodeArr.length; i++) {
        let t = selNodeArr[i];
        checkedKeyArr.value.push(t.id);
    }
}

var onClickNode = function (item) {
    console.log("container tree click");
    console.log(item);
    let className = item.className;
    console.log(className);
    var url = "api/symbol/getSymbolByClass";
    var postObj = { "category": className, "userid": "longx13" };
    post2GetCurentSelClassSymbol(url, postObj);
}

const post2GetCurentSelClassSymbol = function (url, obj) {
    axios.post(url, obj).then(res => {
        console.log(res.data);
        initToolBox(res.data);
    }).catch(function (error) {
        console.log(error);
    })
}

var parseChild = function (list) {
    let childArr = [];
    for (let i = 0; i < list.length; i++) {
        let t = list[i];
        let className = t.name;
        let title = t.title;
        let id = t.id;
        let isleaf = true;
        let children = [];
        if (t.children != null) {
            isleaf = false;
            children = parseChild(t.children);
        }
        let info = { id, title, className, isleaf, children };
        childArr.push(info);
        setToChkedKeyArr(id, className);
    }
    return childArr;
}

var initDatas = function (list) {
    CategoryList.value = [];
    let tmpArr = [];
    for (let i = 0; i < list.length; i++) {
        let t = list[i];
        let className = t.name;
        let title = t.title;
        let id = t.id;
        let isleaf = true;
        let children = [];
        if (t.children != null) {
            isleaf = false;
            children = parseChild(t.children);
        }
        let info = { id, title, className, isleaf, children };
        tmpArr.push(info);

        setToChkedKeyArr(id, className);
    }
    CategoryList.value = tmpArr;
}

const setToChkedKeyArr = (id, className) => {
    let inPreChkArr = false;
    let preList = preCheckedNodeArr.value;
    preList.forEach(ele => {
        if (ele.name == className) {
            inPreChkArr = true;
            return;
        }
    });

    if (inPreChkArr) {
        let inChkKeyArr = false;
        checkedKeyArr.value.forEach(ele => {
            if (ele.id == id) {
                inChkKeyArr = true;
                return;
            }
        });
        if (!inChkKeyArr) {
            checkedKeyArr.value.push(id);
        }
    }

}

const post2GetAllCategory = function (url, obj) {
    axios.post(url, obj).then(res => {
        console.log(res.data);
        initDatas(res.data);
    }).catch(function (error) {
        console.log(error);
    })
}

const initAllCategory = function () {
    console.log("initAllCategory********************************");
    var url = "api/toolcategory/getAllAsTree";
    var postObj = { "userid": store.state.uid };
    post2GetAllCategory(url, postObj);
}

var initToolBox = function (list) {
    toolList_data.value = [];
    var toolArr = [];
    for (var m = 0; m < list.length; m++) {
        var t = list[m];
        var id = t.type;
        var name = t.name;
        var iconURL = t.iconURL;
        var category = t.category;
        var yuansu = { id, name, iconURL, category };
        toolArr.push(yuansu);
    }
    toolList_data.value = toolArr;
}

const setPreCheckedNodeArr = (arr) => {
    preCheckedNodeArr.value = arr;
}

defineExpose({
    parentModule,
    initAllCategory,
    disType,
    setPreCheckedNodeArr
});
</script>

<style>
.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 20px;
    padding: 0px !important;
}

.el-main {
    background-color: #f4f5f7;
    color: #333;
    text-align: left;
    line-height: 20px;
    padding: 0px !important;
}
</style>